<template>
    <van-popup v-model:show="setat.open" :close-on-click-overlay="false" teleport="#app" style="background: transparent">
        <div class="referrer-box">
            <van-icon name="cross" @click="setat.open = false" />
            <div class="title">{{ $t("layout.pleaseEnterTheInvitationCode") }}</div>
            <van-field v-model="setat.referrer" :placeholder="$t('layout.pleaseEnterTheInvitationCode')"></van-field>
            <van-button type="primary" @click="sendRegister" :loading="setat.loading">{{ $t("layout.confirm")
            }}</van-button>
        </div>
    </van-popup>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { Field, Icon, Button, showToast, Popup } from "vant";
import { UserModule } from "@/store/modules/user";
import { LGTRewardModule } from "@/store/modules/LGTRewardState";
import { register, isRegisterd } from "@/api";
export default defineComponent({
    components: {
        [Field.name]: Field,
        [Icon.name]: Icon,
        [showToast.name]: showToast,
        [Button.name]: Button,
        [Popup.name]: Popup,
    },
    emits: ["setReferrer"],
    setup(props, ctx) {
        const router = useRouter();
        const { t } = useI18n();
        const setat: any = reactive({
            open: false,
            loading: false,
            referrer: router.currentRoute.value.query.referrer,
        });
        const sendRegister = async (action: string): Promise<void> => {
            if (setat.referrer) {
                setat.referrer = setat.referrer.trim();
                setat.loading = true;
                try {
                    let isUserExists = await LGTRewardModule.isUserExists(
                        setat.referrer
                    );
                    if (!isUserExists) {
                        showToast(t("layout.referrerHasNoPledge"));
                        setat.loading = false;
                        return;
                    }
                    setat.open = false
                    ctx.emit("setReferrer", setat.referrer)
                } catch (error: any) {
                    showToast(t("layout.pleaseEnterTheCorrectInvitationAddress"));
                }
                setat.loading = false;
            }
        };
        onMounted(async () => { });
        return {
            setat,
            UserModule,
            sendRegister,
        };
    },
});
</script>
<style lang="less" scoped>
.referrer-box {
    position: relative;
    width: 340px;
    height: 198px;
    padding: 25px 15px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 0px 25px 0px rgba(17, 194, 153, 0.11);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);

    .van-icon {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 14px;
    }

    .title {
        font-size: 18px;
        font-weight: 500;
    }

    .van-field {
        margin-top: 20px;
        width: 315px;
        height: 45px;
        background: rgba(245, 245, 245, 0.5);
        border-radius: 8px;

        &::after {
            display: none;
        }

        &:deep(.van-cell__value) {
            .van-field__control {
                font-size: 15px;
            }
        }
    }

    .van-button {
        margin-top: 20px;
    }
}
</style>
